<template>
	<view class="">
		<view class="mt-5" v-if="u_loadmore">
			<u-loadmore status="loading" icon-type="circle" />
		</view>
		<view v-else>
			<view class="m-2">规格名称</view>
			<view class="m-2 p-3 rounded-20 bg-white">
				<view class="">{{attr_name}}</view>
				<view class="text-999 text-right mt-3">{{count}}/20</view>
			</view>
			<view class="m-2">规格属性</view>
			<view class="m-2 px-3 rounded-20 bg-white">
				<view class="h-50 py-2">
					<view class="mt-2" v-for="(item,index) in spec_detail.attr_values" :key="index">{{item}}</view>
					<view class="text-999" v-if="spec_detail.attr_values.length==0">暂无属性值，请使用“补充属性”</view>
				</view>
			</view>
			<view class="text-999 m-2">
				每行一个可选参数值, 多个请换行输入
			</view>
			
			<view class="footer"></view>
			<view class="d-flex sub j-sb bg-white p-2 w-100 position-fixed bottom-0">
				<button type="warn" class="rele" @click="sub_param">补充参数</button>
				<button type="warn" class="dele" @click="dele_param">删除参数</button>
			</view>
		</view>
		
		<!-- 分享 -->
		<s-popup custom-class="demo-popup" position="center" v-model="param_show">
			<view class="param_popup m-2 p-2">
				<!-- 内容 -->
				<view class="d-flex j-sb">
					<view class=""></view>
					<view class="">补充参数</view>
					<view class="" @click="cel_spopup"><u-icon name="close" color="#999999" size="40"></u-icon></view>
				</view>
				<view class="p-2 replenish mt-2">
					<input type="text" value="" placeholder="输入可选参数值, 例如: 大码" @input="param_input" v-model="add_value" />
				</view>
				
				<view class="param text-center mt-4">
					<button type="default" @click="confirm">确定</button>
				</view>
			</view>
		</s-popup>
	</view>
</template>

<script>
	import sPopup from '../../components/s-popup/index.vue';
	export default{
		components:{
			sPopup // 弹框
		},
		data(){
			return {
				attr_name:"", // 规格名称
				goods_id:0, // 商品ID
				specification_id:0, // 规格ID
				attr_id:0, // 属性ID
				spec_detail:"", // 规格详情
				count:0, // 计数
				param_show:false, // 补充参数
				u_loadmore:true, // 加载中 
				add_value:"", // 补充参数
			}
		},
		methods:{
			// 更新
			update(){
				this.$H.post("v2/store/goods/specification/attribute/value/add",{
					goods_id:this.goods_id,
					specification_id:this.specification_id,
					attr_id:this.attr_id,
					add_value:this.add_value
				}).then(res=>{
					console.log(res)
					this.$H.post("v2/store/goods/specification/attribute/detail",{
						attr_id:this.attr_id
					}).then(res=>{
						this.spec_detail=res.data
						console.log(res)
					})
					this.param_show=false
				})
			},
			// 补充参数
			sub_param(){
				this.param_show=true
			},
			// 取消
			cel_spopup(){
				this.param_show=false
			},
			param_input(e){
				this.add_value=e.detail.value
			},
			// 确定
			confirm(){
				this.$H.post("v2/store/goods/specification/attribute/value/add",{
					goods_id:this.goods_id,
					specification_id:this.specification_id,
					attr_id:this.attr_id,
					add_value:this.add_value
				}).then(res=>{
					console.log(res)
					this.$H.post("v2/store/goods/specification/attribute/detail",{
						attr_id:this.attr_id
					}).then(res=>{
						this.spec_detail=res.data
						console.log(res)
					})
					this.param_show=false
					this.$u.toast(`补充成功`);
					this.add_value=""
					getApp().globalData.spec_add="添加"
				})
			},
			// 删除参数
			dele_param(){
				uni.navigateTo({
					url:`/pagesA/goods/spec-delete?attr_id=${this.attr_id}&specification_id=${this.specification_id}&goods_id=${this.goods_id}`
				})
			}
		},
		onShow() {
			this.update()
		},
		onLoad(e) {
			this.attr_id=e.attr_id
			this.goods_id=e.goods_id
			this.specification_id=e.specification_id
			console.log(e)
			this.$H.post("v2/store/goods/specification/attribute/detail",{
				attr_id:this.attr_id
			}).then(res=>{
				this.spec_detail=res.data
				this.attr_name=res.data.attr_name
				this.count=res.data.specification_name.length
				
				this.u_loadmore=false
				console.log(res)
			})
		},
	}
</script>

<style>
	.sub /deep/ .dele{
		background: linear-gradient(to right,#ebebeb,#ebebeb);
		border-radius: 50upx;
		width: 45%;
		color: #000000;
	}
	.sub /deep/ .dele::after{
		border: none;
		color: #000000;
	}
	.sub /deep/ .rele{
		width: 45%;
		border-radius: 50upx;
		background: linear-gradient(to right,#F31E3E,#FB4F37);
	}
	.param /deep/ button{
		width: 50%;
		border-radius: 50upx;
		background: linear-gradient(to right,#F31E3E,#FB4F37);
		color: #FFFFFF;
	}
	.s-popup-wrap{
		width: 80%;
		border-radius: 30upx;
	}
	.replenish{
		border: 4upx solid #999999;
		border-radius: 20upx;
	}
</style>
